<template>
	<view>
		<infoswiper :list="infoList.content" :vrurl="infoList.vrurl" :isvr="true"></infoswiper>
		<view class="business-box">
			<view class="vrcard" @click="govr(infoList.vrurl)">
				<image src="/static/vrcard.png" mode=""></image>
			</view>
			<view class="box-title ellipsis2">
				{{infoList.name}}
			</view>
			<view class="box-rate">
				<u-rate count="5" :readonly="true" v-model="infoList.stars"></u-rate>
			</view>
			<view class="video-cont fbox">
				<view class="left fbox fbox-acenter fbox-jcenter fbox-column">
					<view class="head-box">
						<image class="head" :src="infoList.logo" mode=""></image>
						<image class="card" v-if="infoList.cardId" @click="card(infoList.cardId)"
							src="/static/information/card.png"></image>
					</view>
					<view class="trash" style="background-color: coral;" v-if="infoList.labelType == '2'">
						Brandnew
					</view>
					<view class="trash" style="background-color: red;" v-if="infoList.labelType == '3'">
						Valuable
					</view>
					<view class="trash" style="background-color: deepskyblue;" v-if="infoList.labelType == '1'">
						Promotion
					</view>
					<view class="trash" style="background-color:forestgreen;" v-if="infoList.labelType == '4'">
						On Top
					</view>
				</view>
				<view class="right">
					<view class="title fbox fbox-end fbox-jbetween">
						<view class="text ellipsis">{{infoList.name}}</view>
						<image src="/static/information/card.png" @click="card(infoList.cardId)" v-if="infoList.cardId"
							mode="widthFix"></image>
					</view>
					<view class="time-eye f28 fbox fbox-acenter fbox-jbetween">
						<view class="">
							{{infoList.time}}
						</view>
						<view class="fbox fbox-acenter">
							<image src="/static/mu.png" mode="widthFix"></image>
							<text style="color: #6f6f6f;">{{infoList.showNum}}</text>
						</view>
					</view>
					<view class="addres-box">
						<view class="item fbox fbox-acenter">
							<image src="/static/address.png" mode="widthFix"></image>
							<text class="color3 ellipsis">{{infoList.address}}</text>
						</view>
						<view class="item fbox fbox-acenter">
							<image src="/static/distance.png" mode="widthFix"></image>
							<text class="color3 ellipsis">{{infoList.distance}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="fbox fbox-jbetween" style="padding: 20rpx 30rpx;">
				<view class="date">
					Register Date: {{infoList.time}}
				</view>
				<view class="date">
					Expired Date: {{infoList.time}}
				</view>
			</view>
			<likes type="business" :isLike="infoList.isLike" :id="id" :likeAvatars="likeList" @init="getdetails"
				:likeNum="likeNum"></likes>
			<opinion type="business" :opinioninfo="opinioninfo" :thumbup="thumbup" :id="id" :thumbdown="thumbdown"
				@init="getopinion">
			</opinion>
			<report :id="infoList.id"></report>
			<u-tabs itemStyle="width: 25%; padding:10px 15px 0 15px;height: 36px;" :list="list1" @click="click">
			</u-tabs>
			<view>
				<view style="padding: 20rpx 30rpx;" v-if="index == 0">
					<u-parse style="word-break: break-all;" :html="infoList.brief" @linkpress="onlinkTap"></u-parse>
				</view>
				<view style="padding: 20rpx 30rpx;" v-if="index == 1">
					<u-album :urls="infoList.content" multipleSize="170" rowCount="2" keyName=""></u-album>
				</view>
				<view style="padding: 20rpx 0rpx;" v-if="index == 2">
					<comments class="comments" type="business" :id="id" :ishide="false" @init="getcomment"
						:commentList="commentList" @getcomment="getcomment">
					</comments>
				</view>
			</view>
			<zero-back-top :scrollTop="scrollTop"></zero-back-top>
			<tabbar type="business" :commentlength="commentList.length" :isLike="infoList.isLike"
				:isCollection="infoList.isCollection" @init="getdetails" :id="id" :likeNum="likeNum"></tabbar>
			<u-modal :show="show" :cancelText="cancelText" @confirm="confirm" @cancel="cancel"
				:confirmText="confirmText" :title="title" :showCancelButton="true" :content='content'></u-modal>
		</view>
	</view>
</template>

<script>
	import report from "@/components/report.vue"
	import infoswiper from "@/components/infoswiper.vue"
	import likes from "@/components/likes.vue"
	import opinion from "@/components/opinion.vue"
	import comments from "@/components/comments.vue"
	import tabbar from "@/components/tabbar.vue"
	export default {
		components: {
			infoswiper,
			likes,
			opinion,
			report,
			comments,
			tabbar,
		},
		data() {
			return {
				id: '',
				infoList: [],
				likeList: [],
				commentList: [],
				opinioninfo: {},
				thumbup: '50',
				thumbdown: '50',
				scrollTop: 0,
				list1: [{
					name: this.$t('Business.Details'),
				}, {
					name: this.$t('Business.Photos'),
				}, {
					name: this.$t('Business.Comments')
				}],
				index: 0,
				likeNum: '0',
				show: false,
				urllinks: '',
				cancelText: this.$t('user.cancel'),
				confirmText: this.$t('user.yes'),
				content: this.$t('user.open'),
				title: this.$t('user.prompt'),
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad(e) {
			this.id = e.id
			console.log(e)
			this.getdetails()
			this.getopinion()
			this.getcomment()

		},
		methods: {
			card(id) {
				uni.navigateTo({
					url: '/pages/user/card/details/index?id=' + id
				})
			},
			cancel() {
				this.show = false
			},
			confirm() {
				this.show = false
				plus.runtime.openURL(this.urllinks)
			},
			onlinkTap(e) {
				e.ignore()
				console.log(e)
				this.show = true
				this.urllinks = e.href
			},
			govr(url) {
				uni.navigateTo({
					url: '/pages/VR/index?url=' + url
				})
			},
			click(item) {
				console.log('item', item);
				this.index = item.index
			},
			getcomment() {
				const params = {
					map: 'applet_city_shop_comment_list',
					sid: this.id,
					page: 0,
					version: 'newest'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					console.log(res)
					if (res.data.ec == 200) {
						this.commentList = res.data.data.list
					} else {

					}
				})
			},
			getopinion() {
				const params = {
					map: 'applet_shop_support_get',
					aid: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res, 'opinion')
						this.opinioninfo = res.data.data
						let num = Number(this.opinioninfo.ai_support_no_num) + Number(this.opinioninfo
							.ai_support_num)
						if (num == 0) {
							return
						}
						let calculate1 = Number(this.opinioninfo.ai_support_no_num) / num
						let calculate2 = Number(this.opinioninfo.ai_support_num) / num
						this.thumbup = Number(calculate1 * 100).toFixed(0)
						this.thumbdown = Number(calculate2 * 100).toFixed(0)
					} else {

					}
				})
			},
			getdetails() {
				this.likeList = []
				let params = {
					map: "applet_city_shop_details",
					id: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res)
						this.infoList = res.data.data
						this.likeNum = String(this.infoList.likeNum)
						if (res.data.data.likeList.length < 1) {
							return
						} else {
							res.data.data.likeList.map(item => {
								let img = {
									avatar: item.avatar
								}
								this.likeList.push(img)
							})
							console.log(this.likeList)
						}

					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.business-box {
		width: 100%;
		margin-top: -100rpx;
		z-index: 2;
		position: absolute;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		background-color: #FFFFFF;

		.album {
			@include flex;
			align-items: flex-start;

			&__avatar {
				background-color: $u-bg-color;
				padding: 5px;
				border-radius: 3px;
			}

			&__content {
				margin-left: 10px;
				flex: 1;
			}
		}

		.vrcard {
			position: absolute;
			top: 25rpx;
			right: 30rpx;

			image {
				width: 80rpx;
				height: 55rpx;
			}
		}

		.date {
			padding: 5rpx 10rpx;
			background-color: #eeeeee;
			font-size: 24rpx;
			color: #999;
			border-radius: 10rpx;
		}

		.box-title {
			width: 350rpx;
			text-align: center;
			margin: 0 auto;
			font-weight: bold;
			font-size: 34rpx;
			padding: 20rpx 30rpx;
		}

		.box-rate {
			width: 210rpx;
			margin: 0 auto;
		}

		.trash {
			padding: 5rpx 20rpx;
			background-color: #00aaff;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #fff;
			margin-top: 10rpx;
		}

		.video-cont {
			width: 100%;
			padding: 20rpx 30rpx;

			.left {
				.title {
					text {
						font-size: 32rpx;
						color: #000000;
						font-weight: 600;
					}
				}

				margin-right: 20rpx;

				.head-box {
					width: 100rpx;
					position: relative;

					.head {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.card {
						position: absolute;
						width: 50rpx;
						height: 40rpx;
						left: 0;
						right: 0;
						margin: auto;
						bottom: 0;
					}
				}
			}

			.right {
				width: 70%;

				.title {
					position: relative;

					.text {
						width: 300rpx;
						font-size: 28rpx;
						font-weight: 600;
					}

					image {
						width: 80rpx;
						position: absolute;
						right: 0;
					}
				}

				.time-eye {
					margin-top: 5rpx;
					color: #6f6f6f;

					image {
						width: 40rpx;
						margin-right: 10rpx;
					}
				}

				.addres-box {
					.item {
						margin-top: 10rpx;

						text {
							width: 80%;
							font-size: 24rpx;
							color: #6f6f6f;
						}

						image {
							width: 20rpx;
							margin-right: 5rpx;
						}
					}
				}
			}
		}
	}
</style>
